<template>
    <div class="app">        
        <h2>{{msg}},{{transName}}</h2>
        <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
        <Student :getStudentName="getStudentName"/>
        <!-- 通过父组件给子组件传递一个自定义事件实现：子给父传递数据（第一种写法 v-on 或 @） -->
        <School v-on:transName="getchoolName" v-on:demo="m1" @click.native="show"/>
        <!-- <School @transName.once="getchoolName"/> -->
        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法 使用ref），更灵活可以加定时器 -->
        <!-- <School ref="sch"/> -->

    </div>
</template>

<script>
import Student from './components/Student.vue';
import School from './components/School.vue';
export default {
    name:'app',
    components:{Student,School},
    data(){
        return{
            msg:'你好啊',
            transName:''
        }
    },
    methods:{
        show(){
            console.log('666')
        },
        getStudentName(name){
            console.log("接收学生姓名",name)
            // alert(name)
            this.transName = name
        },
        getchoolName(name){
            console.log("接收学校名称",name)
            // alert(name)
            this.transName = name
        },
        m1(){
            console.log("m1.....")
        }

    },
    /* mounted() {
        setTimeout(() => {
            this.$refs.sch.$once('transName',this.getchoolName)  //绑定自定义事件   一次性
            this.$refs.sch.$on('transName',this.getchoolName)    //绑定自定义事件
        }, 3000);
    } */

}
</script>

<style>
    .app{
        background-color: gray;
        padding: 5px;

    }
</style>